<template>
  <a-menu v-model="current" mode="horizontal" @select='select' class='tw-h-full tw-text-center tw-border-b-0'>
    <a-menu-item v-for='item in menus'
                 :key='item.path || item.name'
                 class='tw-h-full tw-leading-16'
                 v-if='!item.children.length'>
      {{item.name}}
    </a-menu-item>
    <a-sub-menu v-for='item in menus'
                :key='item.path || item.name'
                class='tw-h-full tw-leading-16'
                v-if='item.children.length'>
      <span slot="title" class="submenu-title-wrapper"
      > {{item.name}}
      </span>
      <a-menu-item v-for='childItem in item.children' :key='childItem.path'>
        {{childItem.name}}
      </a-menu-item>
    </a-sub-menu>
<!--    <a-menu-item key="mail"> <a-icon type="mail" />Navigation One </a-menu-item>-->
<!--    <a-menu-item key="app" disabled> <a-icon type="appstore" />Navigation Two </a-menu-item>-->
<!--    <a-sub-menu>-->
<!--        <span slot="title" class="submenu-title-wrapper"-->
<!--        ><a-icon type="setting" />Navigation Three - Submenu</span-->
<!--        >-->
<!--      <a-menu-item-group title="Item 1">-->
<!--        <a-menu-item key="setting:1">-->
<!--          Option 1-->
<!--        </a-menu-item>-->
<!--        <a-menu-item key="setting:2">-->
<!--          Option 2-->
<!--        </a-menu-item>-->
<!--      </a-menu-item-group>-->
<!--      <a-menu-item-group title="Item 2">-->
<!--        <a-menu-item key="setting:3">-->
<!--          Option 3-->
<!--        </a-menu-item>-->
<!--        <a-menu-item key="setting:4">-->
<!--          Option 4-->
<!--        </a-menu-item>-->
<!--      </a-menu-item-group>-->
<!--    </a-sub-menu>-->
<!--    <a-menu-item key="alipay">-->
<!--      <a href="https://antdv.com" target="_blank" rel="noopener noreferrer"-->
<!--      >Navigation Four - Link</a-->
<!--      >-->
<!--    </a-menu-item>-->
  </a-menu>
</template>

<script>
export default {
  name: 'HeadMenu',
  data() {
    return {
      current: [],
      menus: [
        {
          name: '模块1',
          path: '/list/user-list',
          children: []
        },
        {
          name: '模块2',
          path: 'path2',
          children: [
            {
              name: '子模块1',
              path: '/list/device-list',
            },
            {
              name: '子模块2',
              path: 'childPath2',
            }
          ]
        },
        {
          name: '模块3',
          path: 'path3',
          children: []
        }
      ]
    };
  },
  methods: {
    select({item, key, selectedKeys}){
      console.log(item, key, selectedKeys)
    }
  },
  created() {
    // 刷新页面时根据当前路径判断选中哪个
    this.current = [this.$route.path];
  },
  watch: {
    current(newVal){
      console.log(newVal)
    }
  }
}
</script>

<style scoped lang='less'>
.ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected{
  background: @table-select-background;
}

</style>